import Vue from 'vue'
import app from './App.vue'
// 注册vuex
import Vuex from 'vuex'
Vue.use(Vuex)

// 每次刚进入网站的时候, 肯定会调用main.js  在刚调用的时候, 先从本地存储中, 把购物车的
// 数据读出来, 放到 store中
// localStorage.setItem存储的是json字符串 这里需要的是数组对象  所以要用JSON.parse
var car = JSON.parse(localStorage.getItem('car') || '[]')

var store = new Vuex.Store({
	state: {  //this.$store.state.***
		// 将购物车中的商品的数据, 用一个数组存储起来, 在car数组当中 存储一些商品的对象
		// 咱们可以暂时将这个商品对象,设计成这个样子
		// { id: 商品的id, count: 要购买的数量, price: 商品的单价, selected: false }
		// car: []    上边的car 已经定义好了 从本地存储中拿到的数据
		car: car
	},
	mutations: {  //this.$store.commit('方法名', '按需传递唯一的参数')
		addToCar(state,goodsinfo) {
			// 点击加入购物车按钮, 把商品信息 保存到 store中的car上
			// 分析：
			// 1. 如果购物车中, 之前就已经有这个对应的商品了, 那么只需要更新数量(在原有数量的基础上再加上新的数量)
			// 2. 如果没有, 则直接把商品数据, push到car数组中即可
			// some()方法用于检测数组中的元素是否满足指定条件(函数提供)
			// 如果有一个元素满足条件，则表达式返回true , 剩余的元素不会再执行检测
			// 如果没有满足条件的元素，则返回false。
			// some循环中不能加else
			var flag = false

			state.car.some(item => {
				if(item.id === goodsinfo.id) {
					item.count += parseInt(goodsinfo.count)
					flag = true
					return true   //终止后续循环
				}
			})	

			// 如果最终,循环完毕,得到的 flag 还是 false 则把商品数据直接push到购物车中
			if(!flag) {
				state.car.push(goodsinfo)
			}	

			// 当更新 car 之后, 把 car数组 存储到本地的localStorage中
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		updateGoodsInfo(state, goodsinfo) {
			// 修改购物车中商品的数量值
			state.car.some(item => {
				if(item.id == goodsinfo.id) {
					item.count = parseInt(goodsinfo.count)
					return true
				}
			})
			// 当修改完商品的数量 把最新的购物车数据 保存到本地存储中
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		removeFromCar(state, id) {
			// 根据 id 从store中的购物车中删除对应的那条商品数据
			state.car.some((item,i) =>{
				if(item.id == id) {
					state.car.splice(i, 1)
					return true
				}
			})
			// 将删除完毕后的最新的购物车数据同步到本地存储中
			localStorage.setItem('car', JSON.stringify(state.car))
		},
		updateGoodsSelected(state, info) {
			state.car.some(item =>{
				if(item.id == info.id){
					item.selected = info.selected
					return true
				}
			})
			// 把最新的所有的购物车商品的状态保存到本地存储
			localStorage.setItem('car', JSON.stringify(state.car))
		}
	},
	getters: { //this.$store.getters.***
		// 相当于计算属性 也相当于过滤器 filters
		
		getAllCount(state) {
			var c = 0
			state.car.forEach(item => {
				c += item.count
			})
			return c
		},
		getGoodsCount(state) {
			// 问题: 如何从购物车中获取商品的数量呢
			// 1. 我们可以创建一个空对象 然后循环购物车中所有商品的数据
			// 把当前循环这条数据的id, 作为对象的属性名, count值作为属性值,
			// 这样当所有的商品都循环一遍, 就会得到一个对象 { 88: 2, 89: 1, 90: 4 } 
			var goodsCount = {}
			state.car.forEach(item => {
				goodsCount[item.id] = item.count				
			})
			return goodsCount
		},
		getGoodsSelected(state) {
			var goodsSelected = {}
			state.car.forEach(item => {
				goodsSelected[item.id] = item.selected
			})
			return goodsSelected
		},
		getGoodsCountAndAmount(state) {
			var o = {
				sumcount: 0,  //勾选的数量
				sumprice: 0   //勾选的总价
			}
			state.car.forEach(item => {
				if(item.selected) {
					o.sumcount += item.count
					o.sumprice += item.price * item.count
				}
			})
			return o
		}
	}
})

// 按需导入 Mint-UI中的组件   
//   header组件  Swipe, SwipeItem组件
// import { Header, Swipe, SwipeItem, Button,  Lazyload } from 'mint-ui'
// Vue.component(Header.name, Header)
// Vue.component(Swipe.name, Swipe);
// Vue.component(SwipeItem.name, SwipeItem);
// Vue.component(Button.name, Button)
// Vue.use(Lazyload)


// 引入mui.css
import './lib/mui-dist/css/mui.min.css'

//引入icons-extra.css    注意：这里一定要把mui-icons-extra.ttf 拷贝到mui-dist的fonts文件夹中
import './lib/mui-dist/css/icons-extra.css'

import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

//安装图片预览插件 缩略图
import VuePreview from 'vue-preview'
Vue.use(VuePreview)

//1.1 导入路由的包
import VueRouter from 'vue-router'

//1.2 告诉 vue 使用 vueRouter  安装路由
Vue.use(VueRouter)

//定义一个全局的过滤器 
//回调函数中的第一个参数是: 管道符前边的那个值, 这里指的是NewsList.vue中的item.add_time   
//           第二个参数是: 时间格式
//可以用node 中学习到的时间插件(moment)  cnpm i moment -S
//导入格式化时间的插件
import moment from 'moment'

Vue.filter('dateFormat', function(dateStr, pattern="YYYY-MM-DD HH:mm:ss"){
	return moment(dateStr).format(pattern)
})
//导入vue-resource
import VueResource from 'vue-resource'

//安装vue-resource
Vue.use(VueResource)

//设置请求的根路径  一定要放在安装vue-resource之后
Vue.http.options.root = 'http://vue.studyit.io'
//全局设置 post时候表单数据格式组织形式  application/x-www-form-urlencoded
Vue.http.options.emulateJSON = true

//1.3 导入自己的router.js路由模块
import router from './router.js'

var vm = new Vue({
	el: '#app',
	data: {},
	methods: {},
	render: c => c(app),
	//1.4挂载路由对象到vm实例对象上
	router,
	store  //挂载store状态管理对象
})

